<template>
  <div class="spection">
    <div class="spection-title">成品入库检测</div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="warhousing_id" label="入库成品编号" width="232">
        <template #default="scope">
          <span v-if="!scope.row.editing">{{ scope.row.warhousing_id }}</span>
          <el-input v-else v-model="scope.row.warhousing_id"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="produce_date" label="生产日期" width="232">
        <template #default="scope">
          <span v-if="!scope.row.editing">{{ scope.row.produce_date }}</span>
          <el-date-picker
            v-else
            v-model="scope.row.produce_date"
            type="date"
            placeholder="Pick a day"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </template>
      </el-table-column>
      <el-table-column prop="finish_date" label="完工日期" width="232">
        <template #default="scope">
          <span v-if="!scope.row.editing">{{ scope.row.finish_date }}</span>
          <el-date-picker
            v-else
            v-model="scope.row.finish_date"
            type="date"
            placeholder="Pick a day"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </template>
      </el-table-column>
      <el-table-column prop="qualify" label="入库合格情况" width="180">
        <template #default="scope">
          <span v-if="!scope.row.editing">{{ scope.row.qualify }}</span>
          <el-select
            v-else
            v-model="scope.row.qualify"
            @change="handleEditComplete(scope.$index, scope.row, 'qualify')"
          >
            <el-option
              v-for="item in Eligibility"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="warehousing_QAid" label="质检员编号" width="180">
        <template #default="scope">
          <span v-if="!scope.row.editing">{{ scope.row.warehousing_QAid }}</span>
          <el-input v-else v-model="scope.row.warehousing_QAid"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="department" label="责任部门" width="200">
        <template #default="scope">
          <span v-if="!scope.row.editing">{{ scope.row.department }}</span>
          <el-input v-else v-model="scope.row.department" disabled></el-input>
          <!-- <el-select v-else v-model="scope.row.department">
            <el-option
              v-for="item in departments"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select> -->
        </template>
      </el-table-column>
      <el-table-column prop="message" label="备注" width="180">
        <template #default="scope">
          <span v-if="!scope.row.editing">{{ scope.row.message }}</span>
          <el-input v-else v-model="scope.row.message" disabled />
          <!-- <el-select v-else v-model="scope.row.message">
            <el-option
              v-for="item in remark"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>  -->
        </template></el-table-column
      >
      <el-table-column prop="option" label="操作" width="180">
        <template #default="scope">
          <!-- <el-button
            link
            type="primary"
            size="small"
            @click.prevent="update(scope.$index)"
            v-if="!scope.row.editing"
          >
            编辑
          </el-button> -->
          <el-button
            link
            type="primary"
            size="small"
            v-if="scope.row.editing"
            @click.prevent="confirm(scope.$index, scope.row)"
          >
            确认
          </el-button>
          <el-button
            link
            v-if="scope.row.editing"
            type="primary"
            size="small"
            @click.prevent="cancel(scope.$index)"
          >
            取消
          </el-button>
          <!-- <el-button
            link
            type="primary"
            size="small"
            @click.prevent="deleteRow(scope.$index)"
          >
            删除
          </el-button> -->
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup>
import "./index.scss";
import { ref, onMounted, watch } from "vue";
import { ElMessage } from "element-plus";
import { warehousingAdd } from "@/request/axios";
import { departments, Eligibility, remark } from "./index.config.ts";

let tableData = ref([]);
const params = {
  warhousing_id: "",
  produce_date: "",
  finish_date: "",
  qualify: "",
  warehousing_QAid: "",
  department: "",
  message: "",
  editing: true,
};
const handleEditComplete = (index, datas, key) => {
  const data = tableData.value[index][key];
  if (data == "合格") {
    tableData.value[index].department = "销售部门";
    tableData.value[index].message = "销售部待发货";
  } else if (data == "不合格") {
    tableData.value[index].department = "销售部门";
    tableData.value[index].message = "维修部请维修";
  } else {
    tableData.value[index].department = "生产部门";
    tableData.value[index].message = "生产部返工";
  }
};
onMounted(() => {
  tableData.value = [];
  tableData.value.push(params);
});
// 取消
const cancel = (index) => {
  tableData.value.splice(index, 1);
  tableData.value.push({
    warhousing_id: "",
    produce_date: "",
    finish_date: "",
    qualify: "",
    warehousing_QAid: "",
    department: "",
    message: "",
    editing: true,
  });
};
// 确定
const confirm = async (index, data) => {
  // tableData.value[index].editing = false;
  const res = await warehousingAdd(data);
  if (res?.data?.success) {
    ElMessage({
      message: res?.data?.message,
      type: "success",
    });
  } else {
    ElMessage({
      message: res?.data?.message,
      type: "warning",
    });
  }
  tableData.value.splice(index, 1);
  tableData.value.push({
    warhousing_id: "",
    produce_date: "",
    finish_date: "",
    qualify: "",
    warehousing_QAid: "",
    department: "",
    message: "",
    editing: true,
  });
};
// 删除
const deleteRow = (index) => {
  tableData.value.splice(index, 1);
};
</script>
<style scoped></style>
